<template>
    <div>
      <div class="container">
      <h3 class='payTitle'>用户结算</h3>
        <!-- 疫情通告栏 -->
        <van-notice-bar
        left-icon="bell"
        mode='closeable'
  wrapable

  text=" 受疫情影响，新疆地区到货时效延长3~7天，大家电产品因疫情防控暂无法发出，给您带来不便，还请谅解。"
/>
<div class='bd1'></div>
  <p class="addAdress clear"><span class="fl">添加收货地址</span><span class="fr"><van-icon name="arrow" /></span></p>
  <div>
<ul class="zhifu">

  <li v-for="(item, index) in option" :key="index">
  <van-image width="20" height="20" :src="item.icon" />
  <span>  {{item.text}}</span>
  <van-radio :name="item.value" :value='value1' @click='onChange(item)'></van-radio>
</li>
 <van-divider />
 <p class="yunfei"><span>运费</span><span>快递配送(包邮)</span></p>
</ul>
  </div>
      </div>
          <van-submit-bar :price="getTotal*100" decimal-length button-text="  去结算" @submit="toPay" />

    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  props: [],
  data () {
    return {
      option: [
        { text: '支付宝', value: 0, icon: require('../../assets/pay_zfb2.png') },
        { text: '小米钱包 最高立减816元', value: 2, icon: require('../../assets/pay_wx.png') },
        { text: '微信', value: 1, icon: require('../../assets/micash_wap.png') },
        { text: '银联支付', value: 4, icon: require('../../assets/pay_yl1.png') },
        { text: '翼支付', value: 5, icon: require('../../assets/pay_yzf.png') },
        { text: '信用卡分期', value: 6, icon: require('../../assets/pay_antinstalment.png') },
        { text: '花呗分期', value: 7, icon: require('../../assets/pay_micashcreditinstallment_wap.png') }

      ],
      value1: 0

    }
  },
  mounted () {

  },
  computed: {
    ...mapGetters(['getTotal'])
  },
  methods: {
    onChange (item) {
      this.value1 = item.value
    },
    toPay () {
      this.$router.push('/topay')
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  background-color: #f2f2f2
}
.payTitle{
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #f2f2f2;
  font-weight: normal;
  margin: 0;
  border-bottom: 1px solid #ccc;
}
/deep/.van-notice-bar__content{
  font-size: 12px;

}
.fl{
  float: left;
}
.fr{
  float: right;
}
.addAdress{
  padding-left: 10px;
  padding-right: 10px;
}
.clear{
  clear: both;
}
.bd1{
  height: 4px;
  background:url(../../assets/bd1.png) repeat;
}
/deep/.van-dropdown-menu__bar{
  width: 100%;
  margin-top: 50px;
}

/deep/.zhifu{
  margin-top: 50px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #fff;
  li{
    display: flex;
    height: 40px;
  line-height: 40px;
/deep/.van-image__img{
 margin-top: 10px;

  span{
    display: inline-block;
}

  }
  .van-radio{margin-left: auto;}

  }
}
.yunfei{
  display: flex;
  justify-content: space-between;
  font-size: 14px;

}
</style>
